<template>
	<div>
     <!-- 顶部导航栏 --> 
    <!-- <van-nav-bar  :title="header" left-arrow @click-left="onClickLeft" /> -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" >  <!-- @load="onLoad" -->
      <div class="van-cellBox">
        <van-cell v-for="(item,id) in newsList"  @click="oNnewsList(item.id)":key="item.id" >
          <div class=" new-imgs">
            <img :src="item.funImg" alt="">
          </div>
          <div class=" new-boxs">
            <p class="new-name">{{item.title}}</p>
            <p class="new-span" >{{item.content}}</p>
          </div>
        </van-cell>
      </div>
    </van-list>
	</div>
</template>
<script type="text/javascript">
import apiHttp from '../../../../api/index'
export default {
  data() {
    return {
      header: "新闻详情",
      newsList:[],
      loading: false,
      finished: false,
     
    };
  },
  methods: {
    oNnewsList(e,id){
      console.log(id)
      this.$router.push({path:"/details/details",query: { id: id}});
    },
  // 新闻列表---接口
    getNewsList(){
      let params ={
        page : 1,
        pageSize :10
      }
      apiHttp.apiIndex.getNewsList(params,resp=>{
      if(resp.resultCode == '000000'){
          for(let i = 0; i < resp.data.newsList.length; i++){
            this.newsList.push(resp.data.newsList[i])
          }
          this.total = resp.data.total
          this.loading = false;
        }else{
          Toast(resp.resultMsg)
        }
      })
      
    },
    onLoad(){
      if(this.newsList.length>=this.total){
          this.finished  = true
          this.loading = false;
      }else{
          this.getNewsList();
      }
    }
  },

}
</script>
<style scoped>
   /* @import '../../../../assets/css/index.css';  */
   .van-cellBox::after{
    overflow: hidden;
    content: "";
    display: block;
    height: 0;
    clear: both;
  
   }
   .van-cell{
      /* background-color: transparent;
      padding: 0; */
      width: 46%;
      float: left;
      margin-left: 0.4rem;
      margin-bottom: 0.4rem;
   }
   .van-cell__value{
     box-shadow: 0px 0px 12px 0px rgba(86, 31, 34, 0.3);
      border-radius: 4px; 
     background-color: #ffffff;
     padding: 0.5rem;
   }
   .van-list{
      width: 100%;
      margin: 0.4rem auto;
   }
   .new-boxs{
     width: 100%;
     text-align: center;
   }
   .new-boxs p{
     overflow:hidden;
    -webkit-line-clamp:2;
    display:-webkit-box;
    -webkit-box-orient:vertical;

   }
    .new-boxs .new-name{
    margin: 0.3rem auto;
    color: #000000;
    /* line-height: 1.5rem; */
    font-size: 0.7rem;
    height: 1rem;
    overflow:hidden;
    -webkit-line-clamp:1;
    display:-webkit-box;
    -webkit-box-orient:vertical;
   }
   .new-boxs .new-span{
     color: #999999;
      line-height: 0.8rem;
       font-size: 0.6rem;
   }
   .new-imgs{
      height: 6rem;
    width: 100%;
    overflow: hidden;
   }
   .new-imgs img{
       max-width: 100%;
      border-radius: 0.3rem;
   }
  
</style>
